<template>
	<view class="page-wrap">
		<match-media :min-width="MAX_SIZEiZE">
			<navBar></navBar>
		</match-media>
		<match-media :max-width="MAX_SIZEiZE - 1">
			<uni-nav-bar fixed statusBar :backgroundColor="'var(--bg-27)'" :border="false" @clickLeft="clickLeft">
				<text class="page-title">{{pageName}}</text>
				<view class="left-icon" slot="left"> </view>
			</uni-nav-bar>
		</match-media>
		<view class="content">
			<pc-nav-bar :pageName="pageName" class="page-name">
			</pc-nav-bar>
			<view class="scheduleBox">
				<match-media :min-width="MAX_SIZEiZE">
					<view class="scheduleImg" v-if="userWallet">
						<image src="@/static/schedule2.png" mode=""></image>
						<block v-for="item,index in userWallet.levellist" :key="'schedule' + index">
							<view :class="['levelBox',
								{'levelBoxLeft':currentSwiper > item.grade },
								{'levelBoxCenter':currentSwiper === item.grade},
								{'levelBoxRight':currentSwiper < item.grade },
								]" :style="{left: `${ 
									currentSwiper > item.grade ? 50 - 100 / userWallet.levellist.length * (currentSwiper - index) :
									currentSwiper === item.grade ? 50 :
									currentSwiper < item.grade ? 50 + 100 / userWallet.levellist.length * (index - currentSwiper) :
									0
								}%`}">
								<view class="levelBg"></view>
								<view class="levelName">
									VIP{{ item.grade }}
								</view>
							</view>
						</block>
						<!-- <view class="levelBoxLeft" v-if="currentSwiper - 1 >= 0">
							<view class="levelBg"></view>
							<view class="levelName">
								VIP{{ currentSwiper - 1}}
							</view>
						</view>
						<view class="levelBoxCenter">
							<view class="levelBg"></view>
							<view class="levelName">
								VIP{{ currentSwiper}}
							</view>
						</view>
						<view class="levelBoxRight"
							v-if="userWallet.levellist && currentSwiper + 1 < userWallet.levellist.length">
							<view class="levelBg"></view>
							<view class="levelName">
								VIP{{ currentSwiper + 1}}
							</view>
						</view> -->
					</view>
				</match-media>
				<match-media :max-width="MAX_SIZEiZE - 1">
					<view class="scheduleImg" v-if="userWallet">
						<image src="@/static/schedule.png" mode=""></image>
						<block v-for="item,index in userWallet.levellist" :key="'schedule' + index">
							<view :class="['levelBox',
								{'levelBoxLeft':currentSwiper > item.grade },
								{'levelBoxCenter':currentSwiper === item.grade},
								{'levelBoxRight':currentSwiper < item.grade },
								]" :style="{left: `${ 
									currentSwiper > item.grade ? 50 - 100 / 3 * (currentSwiper - index) :
									currentSwiper === item.grade ? 50 :
									currentSwiper < item.grade ? 50 + 100 / 3 * (index - currentSwiper) :
									0
								}%`}">
								<view class="levelBg"></view>
								<view class="levelName">
									VIP{{ item.grade }}
								</view>
							</view>
						</block>
					</view>
				</match-media>
			</view>
			<view class="level-swiper-box" v-if="userWallet">
				<!-- <l-swiper></l-swiper> -->
				<swiper class="level-swiper" :style="'--w:'+levelSwiperW+'px;'" :current="currentSwiper"
					@change="(e)=>currentSwiper = e.detail.current">
					<swiper-item class="level-swiper-item" v-for="item,index in userWallet.levellist"
						:key="'leve' + index">
						<view :class="['level-box', { 'filterate':item.grade !== userInfo.level.grade }]">
							<view class="level-header">
								<view class="level-image">
									<!-- <image src="@/static/uni.png" mode=""></image> -->
									<image :src="item.image" mode=""></image>
								</view>
								<view class="level-current">
									<view class="level-current-container">
										<view class="" v-if="item.grade == userInfo.level.grade">
											{{ $t('Page.vipSpace.currentLevel') }}
										</view>
										<view class="" v-else>
											{{ $t('Page.vipSpace.unlockedLevel') }}
										</view>
										<view class="level-name">
											VIP{{ item.grade }}
										</view>
									</view>
								</view>
							</view>
							<view class="level-content">
								{{ (item.grade + 1) > maxLevel ? 'Já é o nível mais alto' : `${$t('Page.vipSpace.nextLevel')}-`}}
								<text class="level-content-text"
									v-if="(item.grade + 1) <= maxLevel">VIP{{ item.grade + 1 }}</text>
								<view class="progressBox">
									<progress :percent="percentFn(chargeseting.charge, item.recharge_total)"
										backgroundColor="#2b333b" activeColor="#1fff20"></progress>
									<view class="rechargeBox">
										<view class="">
											{{ $t('Page.vipSpace.rechargeAmount') }}
										</view>
										<view class="">
											R$ {{ chargeseting.charge }} /R$ {{ item.recharge_total }}
										</view>
									</view>
								</view>
								<view class="progressBox">
									<progress :percent="percentFn(userWallet.userinfo.gametotal,item.game_total)"
										backgroundColor="#2b333b" activeColor="#1fff20"></progress>
									<view class="rechargeBox">
										<view class="">
											{{ $t('Page.vipSpace.codeAmount') }}
										</view>
										<view class="">
											R$ {{ userWallet.userinfo.gametotal }}/R$ {{ item.game_total }}
										</view>
									</view>
								</view>
							</view>
							<view class="level-bottom">
								<waves class="recharge" @onTap="tapRecharge">
									{{ $t('Page.vipSpace.rechargeUpgrade') }}
								</waves>
							</view>
						</view>
					</swiper-item>
				</swiper>

				<waves class="upOneLevel" @onTap="onTapUpOneLevel">
					<image src="@/static/upOneLevel.png"></image>
				</waves>
				<waves class="nextLowerLevel" @onTap="onNextLowerLevel">
					<image src="@/static/nextLowerLevel.png"></image>
				</waves>
			</view>
			<view class="rankPrivilegeBox">
				<view class="container">
					<view class="header">
						<view class="headerRank"> {{ $t('Page.vipSpace.rankPrivilege') }} </view>
						<view class="headerMark"> VIP{{ currentSwiper }} </view>
					</view>
					<view class="rank-content">
						<view class="rank-row">
							<view class="rank-item">
								<view class="rank-item-title"> {{ $t('Page.vipSpace.withdrawalAmount') }} </view>
								<view class="rank-item-text">R$ {{ levelItem.withdraw_total }}</view>
							</view>
							<view class="rank-item">
								<view class="rank-item-title">{{ $t('Page.vipSpace.returnRate') }}</view>
								<view class="rank-item-text">{{ levelItem.withdraw_rate }}%</view>
							</view>
						</view>
						<view class="rank-row">
							<view class="rank-item">
								<view class="rank-item-title">{{ $t('Page.vipSpace.withdrawalTimes') }}</view>
								<view class="rank-item-text">{{ levelItem.withdraw_num }}/day</view>
							</view>
							<view class="rank-item">
								<view class="rank-item-title"> {{ $t('Page.vipSpace.withdrawalFee') }} </view>
								<view class="rank-item-text">{{ levelItem.back_rate }}%</view>
							</view>
						</view>
					</view>
					<view class="rank-bottom">
						<view class="upgraded"> {{ $t('Page.vipSpace.upgradedStandard') }} </view>
						<view class="rank-bottom-text"> Recharge amount: R$ {{ levelItem.recharge_total }} </view>
						<view class="rank-bottom-text"> Code amount: R$ {{ levelItem.game_total }} </view>
					</view>
				</view>
			</view>
			<view class="contentBottom">
				<view class="titleBox">
					{{ $t('Page.vipSpace.memberRewards') }}
					<!-- <image class="memberImage" src="@/static/title.png" mode=""></image>
					<view class="memberTitle">  </view> -->
				</view>
				<view class="memberRewardsItem">
					<view class="memberRewardsLeft">
						<image class="dailyRewards" src="@/static/dailyRewards.png"></image>
						<view>
							<view class="dailyRewardsText"> {{ $t('Page.vipSpace.dailyRewards') }} </view>
							<view class="dailyRewardsAmount">R$ {{ levelItem.day_bonus }}</view>
						</view>
					</view>
					<!-- 没达到标准 -->
					<waves class="receiveBtn noReceiveBtn" v-if="levelItem.grade > userInfo.level.grade">
						{{ $t('Page.vipSpace.receive') }}
					</waves>
					<!-- 可以领取 -->
					<waves class="receiveBtn" v-else-if="!levelItem.is_day_bonus" @onTap="receiveTap(13)">
						{{ $t('Page.vipSpace.receive') }}
					</waves>
					<!-- 领取过了 -->
					<waves class="receivedBtn" v-else-if="levelItem.is_day_bonus">
						{{ $t('Page.vipSpace.received') }}
					</waves>
				</view>
				<view class="memberRewardsItem">
					<view class="memberRewardsLeft">
						<image class="dailyRewards" src="@/static/treasureRewards.png"></image>
						<view>
							<view class="dailyRewardsText">{{ $t('Page.vipSpace.chestRewards') }}</view>
							<view class="dailyRewardsAmount">R$ {{ levelItem.bonus }}</view>
						</view>
					</view>
					<!-- 没达到标准 -->
					<waves class="receiveBtn noReceiveBtn" v-if="levelItem.grade > userInfo.level.grade">
						{{ $t('Page.vipSpace.receive') }}
					</waves>
					<!-- 可以领取 -->
					<waves class="receiveBtn" v-else-if="!levelItem.is_bonus" @onTap="receiveTap(12)">
						{{ $t('Page.vipSpace.receive') }}
					</waves>
					<!-- 领取过了 -->
					<waves class="receivedBtn" v-else-if="levelItem.is_bonus">
						{{ $t('Page.vipSpace.received') }}
					</waves>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import {
		sendMessage
	} from '@/api/websocket.js'
	import {
		Debounce
	} from '@/utils/common.js'
	import {
		goGamePang
	} from '@/utils/routerJump.js'
	import pcNavBar from '@/components/pcNavBar/pcNavBar.vue'
	export default {
		components: {
			pcNavBar
		},
		data() {
			return {
				currentSwiper: 0,
				MAX_SIZEiZE,
				gameTypeList: [{
					gameName: '',
					gameNumber: 0
				}],
				scrollTop: 0,
				searchParams: {
					cate_id: '',
					order: '2',
					page: 1,
					page_ini: 16,
					gamename: ''
				},
				gameList: [],
				totalCount: 0,
				curGameCateInfo: null,
				seachText: '',
				showType: false,
				isFocus: false,
				status: 'more', //  more/loading/noMore	
				contentText: {
					contentdown: 'Pull up to display more',
					contentrefresh: 'loading...',
					contentnomore: "There's no more data left"
				},

				pageName: this.$t('Page.vipSpace.title'),
				userWallet: null,
				levelSwiperW: 345,
			}
		},
		computed: {
			...mapState({
				theme: state => state.app.theme,
				windowSize: state => state.app.windowSize,
				userInfo: state => state.app.userInfo,
			}),
			...mapGetters('app', ['isLogin']),
			levelItem() {
				return this.userWallet?.levellist[this.currentSwiper] || {}
			},
			chargeseting() {
				return this.userWallet?.userinfo?.chargeseting || {}
			},
			maxLevel() {
				const len = this.userWallet?.levellist.length
				return this.userWallet?.levellist[len - 1]?.grade
			}
		},
		onLoad() {
			this.currentSwiper = this.userInfo.level?.grade || 0
			this.getSubGame()
		},
		onPullDownRefresh() {
			this.gameList = [];
			this.searchParams.page = 1;
			this.getSubGame();
		},
		mounted() {
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.scheduleBox').boundingClientRect(data => {
					console.log(data)
					let width = data.width && Number(data.width)
					console.log(width)
					this.levelSwiperW = (width / 2 + 345 / 2)
				}).exec();
			}, 200)
		},
		methods: {
			tapRecharge() {
				uni.navigateTo({
					url: '/pages/Mine/wallet/wallet?index=0'
				})
			},
			receiveTap(type) {
				const {
					GETRECEIVE
				} = this.$api
				sendMessage({
					flag: GETRECEIVE,
					content: {
						type,
						level: this.levelItem.grade
					}
				})
				uni.$once(GETRECEIVE, (res) => {
					const {
						code,
						data
					} = res
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (code === 1) {
						if (type === 12) {
							this.levelItem.is_bonus = !this.levelItem.is_bonus
						} else if (type === 13) {
							this.levelItem.is_day_bonus = !this.levelItem.is_day_bonus
						}
						// this.userWallet = data
					}
				})
			},
			percentFn(current_total, total) {
				let current_totalv = parseInt(current_total);
				let totalv = parseInt(total);
				// console.log((current_totalv/totalv* 100))
				// if(current_totalv >= totalv) return 100
				return (current_totalv / totalv * 100)
			},
			onTapUpOneLevel() {
				if (this.currentSwiper <= 0) return
				this.currentSwiper--
			},
			onNextLowerLevel() {
				if (this.currentSwiper >= this.userWallet.levellist.length - 1) return
				this.currentSwiper++
			},
			getSubGame() {
				const {
					USERWALLET
				} = this.$api
				sendMessage({
					flag: USERWALLET
				})
				uni.$once(USERWALLET, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.userWallet = data
					}
				})
			},

			lower(e) {
				if (this.gameList.length < this.totalCount) {
					this.searchParams.page++
					this.getSubGame()
					this.status = 'loading'
				} else {
					this.status = 'noMore'
				}
			},
			intoGame: Debounce(function(item, index) {
				this.clickGameurl(item, index)
			}, 500),
			clickGameurl(item, index) {
				goGamePang({
					id: item.id,
					name: item.game_name,
					namecode: item.namecode,
					gamepic: item.gamepic
				})
			},
			handleLike: Debounce(function(item, index) {
				this.dealCollect(item, index)
			}, 500),
			dealCollect(item, index) {
				console.log(item, index)
				const {
					DEALCOLLECT
				} = this.$api
				sendMessage({
					flag: DEALCOLLECT,
					content: {
						game_id: item.id,
						status: 2
					}
				})
				uni.$once(DEALCOLLECT, (res) => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					res.code === 1 && this.gameList.splice(index, 1)
				})
			},
			clickLeft() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			// 转换收藏量和热度单位
			transformNum(number) {
				number = parseInt(number)
				// 1e3为10的三次幂=1000 1e4=10000 1e7=10000000(百万)
				if (number < 1e3) {
					return number
				} else if (number >= 1e3 && number < 1e4) {
					return `${(number / 1e3).toFixed(1)}K`
				} else if (number >= 1e4 && number < 1e6) {
					return `${(number / 1e4).toFixed(1)}W`
				} else if (number >= 1e6 && number < 1e7) {
					return `${(number / 1e6).toFixed(1)}M`
				} else if (number >= 1e7 && number < 1e8) {
					return `${(number /1e7 ).toFixed(1)}kw`
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	// 默认样式 结构   
	@media screen and (min-width:768px) {
		.page-wrap {
			padding-top: 70px;
			overflow-y: auto;
			background: var(--bg-3);

			.content {
				width: 100%;
				min-height: calc(100vh - 70px) !important;
				height: calc(100vh - 70px) !important;
				overflow-y: auto;
				background: var(--bg-3);
				padding: 10px 30px 30px 30px !important;
				box-sizing: border-box;
			}
		}

		.rank-item-text {
			color: var(--color-26) !important;
		}
	}

	.page-wrap {
		min-height: 100vh;

		.page-title {
			width: 100%;
			margin: auto;
			height: 44px;
			line-height: 44px;
			font-size: 20px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
		}

		.left-icon {
			width: 22px;
			height: 22px;
			background: url('@/static/image/back-icon.png') no-repeat;
			background-size: contain;
		}

		.content {
			--w: 100%;
			width: 100%;
			min-height: calc(100vh - 50px);
			padding: 0px 15px 65px;
			background: var(--bg-3);
			box-sizing: border-box;
			overflow-y: scroll;

			.scheduleBox {
				padding: 20px 0 30px 0px;
				overflow-x: hidden;
				border: var(--border-1);
				border-radius: 50px;
				margin: 10px 0;

				.scheduleImg {
					width: 100%;
					height: 4px;
					position: relative;

					image {
						width: 100%;
						height: 100%;
						display: initial;
					}

					position: relative;

					.levelBox {
						transition: all .5s ease;
					}

					.levelBoxLeft {
						position: absolute;
						left: 23%;
						transform: translateX(-50%);
						margin: 0 auto;
						top: -4px;

						.levelBg {
							margin: 0 auto;
							width: 12px;
							height: 12px;
							background: rgba(255, 255, 255, 0.5);
							border-radius: 50%;
							opacity: 1;
							position: relative;
						}
					}

					.levelBoxCenter {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						margin: 0 auto;
						top: -6px;

						.levelBg {
							margin: 0 auto;
							width: 16px;
							height: 16px;
							background: rgba(255, 255, 255, 0.5);
							border-radius: 50%;
							opacity: 1;
							position: relative;

							&::after {
								content: '';
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								width: 12px;
								height: 12px;
								background: #FFFFFF;
								border-radius: 50%;
								opacity: 1;

							}
						}
					}

					.levelBoxRight {
						position: absolute;
						left: 76%;
						transform: translateX(-50%);
						margin: 0 auto;
						top: -4px;

						.levelBg {
							margin: 0 auto;
							width: 12px;
							height: 12px;
							background: rgba(255, 255, 255, 0.5);
							border-radius: 50%;
							opacity: 1;
							position: relative;
						}
					}

					.levelName {
						font-size: 14px;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}

			.level-swiper-box {
				position: relative;

				.level-swiper {
					min-height: 289px;
					// background: linear-gradient(174deg, #F9E9B6 0%, #FFD96D 100%);
					border-radius: 15px;
					opacity: 1;

					/deep/.uni-swiper-slides {
						inset: 0 calc(var(--w) - 345px);
					}

					.level-swiper-item {
						// min-width: 345px !important;
						// max-width: 345px !important;

						.level-box {
							height: 100%;
							margin: 0 5px;
							background: linear-gradient(174deg, #F9E9B6 0%, #FFD96D 100%);
							border-radius: 15px;
							display: flex;
							// justify-content: space-between;
							align-items: center;
							flex-direction: column;

							.level-header {
								width: 100%;
								padding: 10px 27px;
								display: flex;
								justify-content: space-between;
								align-items: center;

								.level-image {
									width: 116px;
									height: 116px;

									image {
										width: 100%;
										height: 100%;
									}
								}

								.level-current {
									width: 155px;
									height: 93px;
									border-radius: 15px 15px 15px 15px;
									opacity: 1;
									border: 2px dotted #E7481A;
									display: flex;
									justify-content: center;
									align-items: center;

									.level-current-container {
										display: flex;
										align-items: center;
										flex-direction: column;
										font-size: 15px;
										font-family: PingFang SC-Bold, PingFang SC;
										font-weight: bold;
										color: var(--color-22);
										line-height: 18px;

										.level-name {
											font-size: 50px;
											font-family: Poppins-ExtraBold Italic, Poppins;
											font-weight: normal;
											color: var(--color-23);
											line-height: 59px;
										}
									}
								}
							}

							.level-content {
								width: 100%;
								padding: 10px 27px;
								color: #2C2525;

								.level-content-text {
									margin-left: 5px;
									font-size: 15px;
									font-family: PingFang SC-Bold, PingFang SC;
									font-weight: bold;
									color: #E7481A;
								}

								.progressBox {
									border-radius: 4px;
									display: flex;
									flex-direction: column;

									/deep/.uni-progress {
										border-radius: inherit;
									}

									/deep/.uni-progress-bar {
										border: 1px solid #FFFFFF;
										border-radius: inherit;
										height: 21px;
										background: linear-gradient(208deg, #2E2215 0%, #3F2A1B 100%);
									}

									/deep/.uni-progress-inner-bar {
										border-radius: inherit;
										background: linear-gradient(180deg, #FF4C17 0%, #C93617 100%);
									}

									.rechargeBox {
										display: flex;
										justify-content: space-between;
										font-size: 11px;
										font-family: PingFang SC-Bold, PingFang SC;
										font-weight: bold;
										color: #665219;
									}
								}
							}

							.level-bottom {
								.recharge {
									width: 315px;
									height: 45px;
									line-height: 45px;
									text-align: center;
									background: var(--bg-28);
									box-shadow: var(--box-shadow-color-4);
									border-radius: 100px 100px 100px 100px;
									font-size: 18px;
									font-family: PingFang SC-Bold, PingFang SC;
									font-weight: bold;
									color: var(--color-21);
								}
							}

						}

						.filterate {
							// filter: grayscale(0.7);
							background: linear-gradient(174deg, #F3F3FB 0%, #CACCDA 100%);

							.level-header {
								.level-image {
									filter: grayscale(0.7);

									image {
										width: 100%;
										height: 100%;
									}
								}

								.level-current {
									border: 2px dotted #B5B8D3;

									.level-current-container {
										color: #4F6596;

										.level-name {
											color: #52689B;
										}
									}

								}
							}

							.level-content {
								color: #55699D;

								.level-content-text {
									color: #55699D;
								}

								.progressBox {

									/deep/.uni-progress-bar {
										background: linear-gradient(208deg, #8991C9 0%, #A1A4B7 100%);
									}

									/deep/.uni-progress-inner-bar {
										background: linear-gradient(180deg, #52689B 0%, #163888 100%);
									}

									.rechargeBox {
										color: #7C8DB2;
									}
								}
							}

							.level-bottom {
								.recharge {
									background: #52689B;
									color: #FFFFFF;
									box-shadow: none;
								}
							}
						}
					}
				}

				.upOneLevel {
					position: absolute;
					left: -5px;
					top: 50%;
					transform: translateY(-50%);
					width: 24px;
					height: 47px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.nextLowerLevel {
					position: absolute;
					right: -5px;
					top: 50%;
					transform: translateY(-50%);
					width: 24px;
					height: 47px;

					image {
						width: 100%;
						height: 100%;
					}

				}
			}

			.rankPrivilegeBox {
				background: var(--bg-30);
				border-radius: 15px;
				display: flex;
				flex-direction: column;
				padding: 10px;
				margin: 15px 0;

				.container {
					width: 100%;

					.header {
						display: flex;
						align-items: center;

						.headerRank {
							font-size: 15px;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #FFFFFF;
						}

						.headerMark {
							width: 40px;
							height: 16px;
							line-height: 16px;
							text-align: center;
							background: var(--bg-29);
							border-radius: 15px 15px 15px 15px;
							opacity: 1;
							font-size: 10px;
							font-family: Inter-Semi Bold Italic, Inter;
							font-weight: normal;
							color: #FFFFFF;
							text-shadow: 0px 2px 2px #B63712;
							margin-left: 20px;
						}
					}

					.rank-content {
						margin-top: 10px;
						display: flex;
						flex-direction: column;

						.rank-row {
							display: flex;

							.rank-item {
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								flex: 1;
								height: 45px;
								background: var(--color-24);
								border-radius: 5px;

								&:first-child {
									margin: 0 10px 10px 0;
								}

								.rank-item-title {
									font-size: 9px;
									font-family: PingFang SC-Medium, PingFang SC;
									font-weight: 500;
									color: #FFFFFF;
								}

								.rank-item-text {
									font-size: 12px;
									font-family: PingFang SC-Bold, PingFang SC;
									font-weight: bold;
									color: #FFFFFF;
								}
							}
						}
					}

					.rank-bottom {
						font-size: 15px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;

						.upgraded {
							margin-bottom: 10px;
						}

						.rank-bottom-text {
							font-size: 12px;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: var(--color-25);
						}
					}
				}
			}

			.contentBottom {
				.titleBox {
					background: var(--bg-image-2) no-repeat;
					height: 35px;
					line-height: 35px;
					text-align: center;
					background-size: 100% 100%;
					margin: 0 auto 10px;
					width: fit-content;
					min-width: 213px;
					padding: 0 30px;
					font-size: 16px;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}

				.memberRewardsItem {
					display: flex;
					align-items: center;
					justify-content: space-between;
					min-width: 345px;
					background: var(--bg-31);
					border-radius: 15px;
					padding: 15px;
					margin-bottom: 10px;

					.memberRewardsLeft {
						display: flex;

						.dailyRewards {
							width: 40px;
							height: 40px;
							margin-right: 10px;
						}

						.dailyRewardsText {
							font-size: 16px;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #FFFFFF;
						}

						.dailyRewardsAmount {
							font-size: 12px;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: var(--color-26);
						}
					}

					.receiveBtn {
						width: 89px;
						height: 34px;
						background: var(--bg-32);
						box-shadow: var(--box-shadow-color-5);
						border-radius: 100px;
						font-size: 16px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: var(--color-28);
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.noReceiveBtn {
						background: var(--bg-33);
						color: var(--color-27);
						box-shadow: none;
					}

					.receivedBtn {
						width: 100px;
						height: 34px;
						background: var(--bg-33);
						border-radius: 20px;
						font-size: 16px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: var(--color-27);
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
</style>